<template>
  <div>
    <a-modal :visible="visible" @before-open="open" :on-before-ok="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="25%" :mask-closable="false">
      <template #title> 导入初始化库存 </template>
      <div>
        <a-form auto-label-width ref="formRef" size="medium" :model="form">
          <a-space direction="vertical" :size="24">
            <a-row>
              <a-col :span="24">
                <a-form-item field="warehouseCode" label="选择仓库" :rules="rules.warehouseCode">
                  <a-select placeholder="请选择仓库" v-model="form.warehouseCode" allow-clear>
                    <a-option v-for="item of houseList" :label="item.warehouseName" :value="item.warehouseCode"></a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item field="file" label="选择文件" class="upload" :rules="rules.file">
                  <a-upload v-if="visible" action="#" :auto-upload="false" @before-remove="beforeRemove" @before-upload="beforeUpload" />
                  <a-button type="text" class="text" @click="downloadTemplate">点击下载模板</a-button>
                </a-form-item>
              </a-col>
            </a-row>
          </a-space>
        </a-form>
      </div>
      <div class="footer-text">
        <p>支持导入格式为xls的文件</p>
        <p> 模板中的表头不可更改、位置不能调换，不能删除</p>
        <p>店铺+SKU+MSKU是唯一值，如果出现重复，以第一条记录为准 每次导入将覆盖已有的数据</p>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { findWarehouseListByParam } from '@/api/warehouse'
  import { importInventory } from '@/api/inventory'
  import { Message } from '@arco-design/web-vue'
  import { resolve } from 'path-browserify'
  export default defineComponent({
    props: ['detail', 'ids', 'remarkText'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const formRef = ref()
      const data: any = reactive({
        form: {},
        rules: {
          warehouseCode: [{ required: true, message: '请选择仓库' }],
          file: [{ required: true, message: '请选择文件' }],
        },
        houseList: [],
      })

      const open = () => {
        getWareHouseList()
      }
      const handleOk = (done: any) => {
        formRef.value.validate(async (valid: any) => {
          if (!valid) {
            let params = new FormData()
            params.append('file', data.form.file)
            params.append('warehouseCode', data.form.warehouseCode)
            try {
              const res: any = await importInventory(params)
              if (res.code == 'SUCCESS') {
                data.form = {}
                formRef.value.clearValidate()
                Message.success('导入成功')
                visible.value = false
                emit('save')
              }
              done(true)
            } catch (error) {
              done(true)
            }
          } else {
            done(true)
          }
        })
      }

      const getWareHouseList = async () => {
        const res = await findWarehouseListByParam()
        data.houseList = res.data
      }

      const handleCancel = () => {
        data.form = {}
        formRef.value.clearValidate()
        visible.value = false
      }

      const beforeUpload = (file: any) => {
        const extension = file.name.substring(file.name.lastIndexOf('.') + 1)

        if (data.form.file) {
          Message.error('每次只能上传一个excel文件')
          return
        }

        if (!['xls', 'xlsx'].includes(extension)) {
          Message.error('只能上传excel文件')
          return
        }
        data.form.file = file
        console.log(data.form)

        return true
      }

      const downloadTemplate = () => {
        let a = document.createElement('a')
        a.href = 'https://cdn2.selleroa.com/saas/inventory/85372512439483393.xls'
        a.click()
        a.style.display = 'none'
      }

      const beforeRemove = () => {
        data.form.file = null
        return true
      }
      return {
        ...(toRefs(data) as any),
        visible,
        formRef,
        open,
        handleOk,
        handleCancel,
        beforeUpload,
        beforeRemove,
        downloadTemplate,
      }
    },
  })
</script>

<style lang="less" scoped>
  .upload {
    position: relative;
    :deep(.arco-upload-progress) {
      display: none;
    }
  }

  .text {
    position: absolute;
    left: 180px;
    top: 0;
  }

  .footer-text {
    font-size: 12px;
    color: darkgray;
  }
</style>
